/**
 * 弹出添加用户信息框
 */
function addUser() {
    layer.open({
        type: 1,
        title: '新增用户信息',
        closeBtn: 1, //显示关闭按钮
        shadeClose: true,
        area: ['893px', '600px'],
        content: $("#div_add")
    });
}
/***
 * 删除用户信息
 */
function deleteUser() {
    if ($("input[type='checkbox'][id!='checkAll']:checked").length === 0) {
        layer.msg('请至少选择一个用户进行删除', { icon: 2, time: 2000 });
        return false;
    }
    layer.confirm('确认要删除这些用户吗？', {
        btn: ['是', '否'] //按钮
    }, function() {
        $("input[type='checkbox'][id!='checkAll']:checked").each(function() {
            $(this).parents("tr").remove();
        })
        layer.closeAll();
    }, function() {});

}
/**
 * 是否是更新状态
 */
var isUpdate = false;
/**
 * 弹出更新用户框
 * @param {工号} no 
 */
function update(no) {
    $("#hidNo").val(no);
    isUpdate = true;
    let flag = initData();
    if (flag) {
        layer.open({
            type: 1,
            title: '修改用户信息',
            closeBtn: 1, //显示关闭按钮
            shadeClose: true,
            area: ['893px', '600px'],
            content: $("#div_add")
        });
    } else {
        layer.msg('该用户不存在', { icon: 2, time: 2000 });
    }
}
/**
 * 加载一条用户数据
 */
function initData() {
    let no = $("#hidNo").val();
    let exists = false;
    $("input[type='checkbox']").each(function() {
        if ($(this).val() === no) {
            exists = true;
            $("#no").val(no);
            $("#no").attr("readonly", true);

            let name = $(this).parents("td").nextAll("td[name='name']").text();
            $("#name").val(name);

            let sex = $(this).parents("td").nextAll("td[name='sex']").text();
            $("input[name='sex'][value='" + sex + "']").click();

            let password = $(this).parents("td").nextAll("td[name='password']").text();
            $("#password").val(password);

            let age = $(this).parents("td").nextAll("td[name='age']").text();
            $("#age").val(age);

            let birth = $(this).parents("td").nextAll("td[name='birth']").text();
            $("#birth").val(birth);
        }
    });
    return exists;
}
/**
 * 提交数据
 */
function submit() {
    let no = $("#no").val();
    if (no.trim() === "") {
        layer.msg('工号不能为空', { icon: 2, time: 2000 });
        $("#no").focus();
        return false;
    }
    /**
     * 非更新状态，需判断用户是否存在
     */
    if (!isUpdate) {
        let exists = true;
        $("input[type='checkbox']").each(function() {
            if ($(this).val() === no) {
                layer.msg('该用户已存在', { icon: 2, time: 2000 });
                $("#name").focus();
                exists = false;
            }
        });
        if (!exists) {
            return false;
        }
    }
    let name = $("#name").val();
    if (name.trim() === "") {
        layer.msg('用户名不能为空', { icon: 2, time: 2000 });
        $("#name").focus();
        return false;
    }
    let sex = $("input[name='sex']:checked").val();
    let password = $("#password").val();
    if (password.trim() === "") {
        layer.msg('密码不能为空', { icon: 2, time: 2000 });
        $("#password").focus();
        return false;
    }
    let age = $("#age").val();
    if (age.trim() === "") {
        layer.msg('年龄不能为空', { icon: 2, time: 2000 });
        $("#age").focus();
        return false;
    }
    let birth = $("#birth").val();
    if (birth.trim() === "") {
        layer.msg('出生年月不能为空', { icon: 2, time: 2000 });
        $("#birth").focus();
        return false;
    }
    /**
     * 更新状态只需要更新表格内数据
     */
    if (isUpdate) {
        let updateObj = $("input[type='checkbox'][value='" + no + "']");
        $(updateObj).parents("td").nextAll("td[name='name']").text(name);
        $(updateObj).parents("td").nextAll("td[name='sex']").text(sex);
        $(updateObj).parents("td").nextAll("td[name='password']").text(password);
        $(updateObj).parents("td").nextAll("td[name='age']").text(age);
        $(updateObj).parents("td").nextAll("td[name='birth']").text(birth);
        layer.msg('更新成功', { icon: 1, time: 2000 }, function() { layer.closeAll() });
    } else {
        //新增数据在表格后添加数据
        let html = `<tr>
        <td><input type="checkbox" class="checkbox" value="${no}"/></td>
        <td name="no">${no}</td>
        <td name="name">${name}</td>
        <td name="sex">${sex}</td>
        <td name="password">${password}</td>
        <td name="age">${age}</td>
        <td name="birth">${birth}</td>
        <td><button class="btn btn-link" onclick="update('${no}')">编辑</button></td>
      </tr>`;
        $("#tbody").append(html);
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-red',
            radioClass: 'iradio_square-red',
            increaseArea: '20%' // optional
        });
        layer.msg('新增成功', { icon: 1, time: 2000 }, function() { layer.closeAll() });
    }
    //不管是新增还是更新后都清空表单
    $("#no").val('');
    $("#name").val('');
    $("input[name='sex'][value='男']").click();
    $("#password").val('');
    $("#age").val('');
    $("#birth").val('');
    $("#hidNo").val('');
    isUpdate = false;
}

/**
 * 查询用户信息
 */
function query() {
    let no = $('#txtno').val();
    let name = $('#txtname').val();
    $("#tbody").children().each(function() {
        let tbNo = $(this).children('[name="no"]').text();
        let tbName = $(this).children('[name="name"]').text();
        console.log(tbNo.indexOf(no));
        console.log(tbName.indexOf(name));
        if (no !== "" && name !== "") {
            if (tbNo.indexOf(no) === -1 && tbName.indexOf(name) === -1) $(this).hide();
            else $(this).show();
        } else if (no !== "") {
            if (tbNo.indexOf(no) === -1) $(this).hide();
            else $(this).show();
        } else if (name !== "") {
            if (tbName.indexOf(name) === -1) $(this).hide();
            else $(this).show();
        } else $(this).show();
    });
}
$(function() {
    $("#birth").datetimepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        showMeridian: true,
        pickerPosition: "bottom-left",
        language: 'zh-CN', //中文，需要引用zh-CN.js包
        minView: 4 //日期时间选择器所能够提供的最精确的时间选择视图
    });
    /**
     * 绑定checkbox和radio的样式
     */
    $('input').iCheck({
        checkboxClass: 'icheckbox_square-red',
        radioClass: 'iradio_square-red',
        increaseArea: '20%' // optional
    });
    /**
     * 绑定新增按钮事件
     */
    $("#btnAdd").click(function() {
        addUser();
    });
    /**
     * 绑定删除按钮事件方法
     */
    $("#btnDel").click(function() {
        deleteUser();
    });
    /**
     * 绑定查询按钮事件方法
     */
    $("#btnQuery").click(function() {
        query();
    });
    /**
     * 绑定提交按钮事件方法
     */
    $("#btn_submit").click(function() {
        submit();
    });
    /**
     * 全选按钮，全选
     */
    $("#checkAll").on('ifChecked', function(event) {
        $("input[type='checkbox'][id!='checkAll']").iCheck('check');
    });
    /**
     * 全选取消
     */
    $("#checkAll").on('ifUnchecked', function(event) {
        $("input[type='checkbox'][id!='checkAll']").iCheck('uncheck');
    });

});